<template>
  <!-- <div class="base-element-audio"
    :style="{
      top: elementInfo.top + 'px',
      left: elementInfo.left + 'px',
      width: elementInfo.width + 'px',
      height: elementInfo.height + 'px',
    }"
  >
    <div
      class="rotate-wrapper"
      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
    >
      <div class="element-content">
        <IconVolumeNotice 
          class="audio-icon" 
          :style="{
            fontSize: audioIconSize,
            color: elementInfo.color,
          }"
        />
      </div>
    </div>
  </div> -->
  <audio  autoplay @ended="fn"  :src="musiclist[liststatus]"></audio>
</template>

<script lang="ts" setup>

import { computed, PropType,ref } from 'vue'
import { PPTAudioElement } from '@/types/slides'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
const { slides, slideIndex, currentSlide } = storeToRefs(useSlidesStore())

const musiclist = ref([])

const liststatus= ref(0)
if(slides.value[0].turningMode){
  musiclist.value = slides.value[0].turningMode
}
// const musiclist = ref([ "https://kpen.oss-cn-shenzhen.aliyuncs.com/202368/1686233711117.mp3","https://kpen.oss-cn-shenzhen.aliyuncs.com/202368/1686233145103.mp3", "https://kpen.oss-cn-shenzhen.aliyuncs.com/202367/1686117636147.mp3"   ])


function fn(e:any){
   if(  liststatus.value  <musiclist.value.length ){
    liststatus.value++
    
   }
  
   
}
const props = defineProps({
  elementInfo: {
    type: Object as PropType<PPTAudioElement>,
    required: true,
  },
})

const audioIconSize = computed(() => {
  return Math.min(props.elementInfo.width, props.elementInfo.height) + 'px'
})
</script>

<style lang="scss" scoped>
.base-element-audio {
  position: absolute;
}
.rotate-wrapper {
  width: 100%;
  height: 100%;
}
.element-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.audio-icon {
  cursor: move;
}
</style>
